<template>
  <div class="userManger">
    <div class="content boxShadow">
      <div class="adds">
        <b class="button-n" @click="addUser">添加API帐号</b>
      </div>
      <!-- <noCont v-if="isEmpty"></noCont> -->
      <div class="tables" v-if="!isEmpty">
        <el-table :data="tableData" size="small" stripe border>
          <el-table-column prop="channelName" label="API帐号">
          </el-table-column>
          <el-table-column prop="channelName" label="联系人姓名">
          </el-table-column>
          <el-table-column prop="channelName" label="手机号">
          </el-table-column>
          <el-table-column prop="channelName" label="单价">
          </el-table-column>
          <el-table-column prop="channelName" label="余额">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <b class="button-text" @click="editUser(scope.row)">编辑</b>
              <b class="button-text" @click="lookScrate(scope.row)">查看密钥</b>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div class="pager">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizeArray" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
          </el-pagination>
        </div> -->
      </div>
    </div>
    <AlertBox :show="userAccountObj.show" :title="userAccountObj.type == 'edit' ? '添加API帐号' : '修改API帐号'" @sureClick="addTest" @close="userAccountObj.show=false">
      <div class="formAlert" slot="cont">
        <el-form ref="form" label-width="150px" size="medium">
          <el-form-item label="用户名">
            <el-input v-model="userAccountObj.userName" class="inp" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="userAccountObj.password" class="inp" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="联系人姓名">
            <el-input v-model="userAccountObj.connectName" class="inp" placeholder="请输入联系姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系人手机">
            <el-input v-model="userAccountObj.connectPhone" type="number" class="inp" placeholder="请输入联系手机"></el-input>
          </el-form-item>
          <el-form-item label="快递类型">
            <el-select v-model="userAccountObj.logisticType" class="inp" placeholder="请选择快递类型">
              <el-option label="圆通速递" value="1">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单价">
            <el-input v-model="userAccountObj.price" type="number" class="inp" placeholder="请输入单价"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </AlertBox>
    <AlertBox :show="scrateObj.show" title="查看密钥" @sureClick="copy" @close="scrateObj.show=false" sureText="复制" cancelText="关闭">
      <div class="formAlert" slot="cont">
        <el-form ref="form" label-width="150px">
          <el-form-item label="appkey：">
            <strong class="textKey">fdsadssdsadsadsadsd</strong>
          </el-form-item>
          <el-form-item label="appsecret：">
            <strong class="textKey">dsadsadsadsdsdsdsdssa</strong>
          </el-form-item>
          <el-form-item label="接口地址：">
            <strong class="textKey">dsadsadsadsdsdsadsadd</strong>
          </el-form-item>
        </el-form>
      </div>
    </AlertBox>
  </div>
</template>
<script type="text/ecmascript-6">
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
// import { pageCommon } from '@mixin/pageCommon'
// import NoCont from '@base/noCont'
import md5 from 'md5'
import { mapGetters } from 'vuex'
import AlertBox from '@base/alertBox'
Vue.use(VueClipboard)
export default {
  name: 'userManger',
  // mixins: [pageCommon],
  components: {
    // NoCont,
    AlertBox
  },
  data () {
    return {
      apiUrl: '/api/channel/account/getChannelPagingList',
      tableData: [{
        channelName: '大厦大厦大啥'
      }],
      userAccountObj: {
        show: false,
        type: '',
        userName: '',
        password: '',
        connectName: '',
        connectPhone: '',
        logisticType: '1',
        price: ''
      },
      scrateObj: {
        show: false
      }
    }
  },
  computed: {
    params () {
      return {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
    },
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    copy () { // 复制
      this.$copyText('acbfff').then((e) => {
        this.$message({
          message: '复制成功!',
          type: 'success'
        })
      })
    },
    addUser () { // 点击添加
      this.userAccountObj = {
        ...this.userAccountObj,
        show: true,
        type: 'add'
      }
    },
    editUser (row) { // 点击编辑
      this.userAccountObj = {
        ...this.userAccountObj,
        show: true,
        type: 'edit'
      }
    },
    lookScrate (row) { // 查看密钥
      this.scrateObj = {
        ...this.scrateObj,
        show: true
      }
    },
    addTest () { // 验证添加的字段内容填写完整
      if (this.form.channelName === '') {
        this.$message({
          message: '请输入渠道名称',
          type: 'warning'
        })
      } else if (this.form.channelAccount === '') {
        this.$message({
          message: '请输入渠道账号',
          type: 'warning'
        })
      } else if (this.form.channelPassword === '') {
        this.$message({
          message: '请输入密码',
          type: 'warning'
        })
      } else if (this.form.channelTouchName === '') {
        this.$message({
          message: '请输入联系人姓名',
          type: 'warning'
        })
      } else if (this.form.channelPhone === '') {
        this.$message({
          message: '请输入联系人手机',
          type: 'warning'
        })
      } else if (this.form.channelQq === '') {
        this.$message({
          message: '请输入联系人QQ',
          type: 'warning'
        })
      } else if (this.form.channelChat === '') {
        this.$message({
          message: '请输入联系人微信',
          type: 'warning'
        })
      } else {
        this.addChannel()
      }
    },
    addChannel () { // 确认添加渠道请求
      this.$ajax.post('/api/channel/account/addChannel', {
        channelName: this.form.channelName,
        adminUserName: this.form.channelAccount,
        adminUserPassword: md5(this.form.channelPassword),
        concatName: this.form.channelTouchName,
        concatTelephone: this.form.channelPhone,
        concatQQ: this.form.channelQq,
        concatWechatNum: this.form.channelChat
      }).then((data) => {
        if (data.data.code === '200') {
          this.$confirm('您已成功添加渠道, 现在去设置物流价格?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'success'
          }).then(() => {
            this.$router.push({ name: 'wayDetail', query: { channelId: data.data.data.channelId } })
          }).catch((err) => {
            console.error(err)
          })
          this.search()
          this.userAccountObj.show = false
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        if (err) {
          this.$message({
            message: '生意太火爆了, 请稍后再试',
            type: 'error'
          })
        }
      })
    },
    setList (data) { // 获取表格数据并处理
      this.tableData = data
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.userManger
  .content
    .adds
      text-align right
    .tables
      margin-top 20px
</style>
